<template>
    <div class="r" v-if="videoinfo !== null">
        <div class="course">
            <div class="title">{{ videoinfo.courseName }}</div>
            <div class="video">
                <el-card :body-style="{ padding: '0px' }">
                    <video ref="vi" controls :src="videoUrl"></video>
                    <div class="videoinfo">
                        <img src="@/assets/autor.png"/> <span>{{ videoinfo.teacher.name }}</span>
                        <img src="@/assets/time.png"/> <span>{{ videoinfo.createTime }}</span>
                        <img v-if="loveFlag" @click="love()" src="@/assets/love1.png"/>
                        <img v-else @click="love()" src="@/assets/love.png"/> <span>{{ videoinfo.collectNum }}</span>
                    </div>
                </el-card>

                <div class="videoList">
                    <el-card class="card">
                        <div class="list">
                            <div class="listTitle">课程选集&nbsp;<span>({{ i }}/{{ videoinfo.courseNum }})</span></div>
                            <div :class="i === index+1 ? 'videoOnPlay':'' " @click.prevent="changeVideo(item,index)"
                                 v-for="(item,index) in videoinfo.courseVideoList">
                                <img v-if="i === index+1" src="@/assets/playing.gif">
                                <img v-else>
                                &nbsp;&nbsp;P{{ index + 1 }}&nbsp;&nbsp;
                                <a href="#JavaScript;">第{{ index + 1 }}集</a>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <el-divider></el-divider>
        <div class="comment">
            <div v-if="replysFlag && replys !== null">
                <!--<div v-if="replys.length !== 0" >-->

                    <el-card class="comments box-card">
                        <div class="all">
                            <div class="aa">
                                <span class="a">评论</span><span class="b">({{ replys.length }})</span>
                            </div>
                            <div class="comNew" @keyup.ctrl.enter="replyUp()">
                                <el-input
                                    type="textarea"
                                    placeholder="写下自己的想法"
                                    v-model="textarea"
                                    maxlength="300"
                                    show-word-limit
                                    :autosize="{ minRows: 2}"
                                >
                                </el-input>
                                <div class="btn">
                                    <div class="tip">Tip&nbsp;:&nbsp;&nbsp;Enter换行；Ctrl+Enter提交</div>
                                    <el-button type="danger" plain @click="replyUp()">发表</el-button>
                                </div>
                            </div>
                            <div class="coms" v-if="replys.length !== 0">
                                <div class="com" v-for="(item,index) in replys" :key="this">
                                    <div class="name">
                                        <div class="n">{{ item.student.name }}</div>
                                        <div class="time"><img src="@/assets/time1.svg"/>{{ item.time }}</div>
                                    </div>
                                    <div class="replay">
                                        <div>{{ item.content }}</div>
                                        <div class="good">
                                            <img v-if="flagGood[index]" @click="good({index,id:1})"
                                                 src="@/assets/good2.png"/>
                                            <img v-else @click="good({index,id:1})" src="@/assets/good.png">
                                            {{ item.likeNums }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-else class="noComs">没有评论</div>
                        </div>
                    </el-card>

                <!--</div>-->
            </div>
            <div v-else class="noComs">
                <i class="el-icon-loading"></i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Course-info",
    data() {
        return {
            videoinfo: null,
            videoUrl: null,
            i: 1,
            flag: false,//集数选中的标识
            loveFlag: false,//课程点赞的标识
            flagGood: [],//评论点赞的标识

            replysFlag:false,//评论标识
            replys: null,
            textarea: "",
        }
    },
    methods: {
        changeVideo(item, i) {
            console.log("changeVideo()", item, i);
            this.videoUrl = item.videoUrl;
            this.i = i + 1
        },
        love() {
            this.loveFlag = !this.loveFlag;
            if (this.loveFlag) {
                this.videoinfo.collectNum = this.videoinfo.collectNum + 1
            } else {
                this.videoinfo.collectNum = this.videoinfo.collectNum - 1
            }
        },
        good(good) {
            console.log(good, this.flagGood[good.index])
            this.flagGood[good.index] = !this.flagGood[good.index];
            if (this.flagGood[good.index]) {
                this.replys[good.index].likeNums = this.replys[good.index].likeNums + 1
            } else {
                this.replys[good.index].likeNums = this.replys[good.index].likeNums - 1
            }
        },
        replyUp() {
            console.log("replyUp()", this.textarea, this.replys)
            this.$set(this.replys, this.replys.length, {
                cid: "yuwen_1001",
                content: this.textarea.trim(),
                time: this.$util.parseTimestamp(Date.now()),
                likeNums: 0,
                student: {
                    name: "小臣",
                    id: 5
                }
            })
            this.replys = this.replys.sort((a, b) => {
                if (this.$util.parseTimeStr(a.time) < this.$util.parseTimeStr(b.time)) {
                    return -5;
                } else if (this.$util.parseTimeStr(a.time) === this.$util.parseTimeStr(b.time)) {
                    return 0;
                } else {
                    return 5;
                }
            })
            //将新的评论提交到数据库

        }
    },

    mounted() {
        this.videoinfo = JSON.parse(localStorage.getItem("videoinfo"));
        this.videoUrl = this.videoinfo.courseVideoList[0].videoUrl;
        //请求评论信息
        this.$axios.get("/course/getCouAndRep/" + this.videoinfo.courseId)
            .then(res => {
                this.replysFlag=true;
                if (res.status === 200){
                    let rep=res.data.courseCommentList;
                    this.replys = rep.sort((a, b) => {
                        if (this.$util.parseTimeStr(a.time) < this.$util.parseTimeStr(b.time)) {
                            return -5;
                        } else if (this.$util.parseTimeStr(a.time) === this.$util.parseTimeStr(b.time)) {
                            return 0;
                        } else {
                            return 5;
                        }
                    });
                    console.log(res,this.replysFlag,this.replys);
                }
            })
    }
}
</script>

<style scoped lang="less">
.coms .com {
    background-color: #faf8f8;
    margin: 20px 0;
    padding: 10px;
    border-radius: 2%;
}

.coms .com:hover {
    box-shadow: 2px 3px 10px #ded4d4;
}

.coms .com img {
    width: 20px;
    height: 100%;
    margin-right: 5px;
}

.coms .com .time, .good {
    display: flex;
    align-items: center;
}

.coms .com .replay, .name {
    display: flex;
    align-items: flex-end;
}

.coms .com .name .n {
    font-size: 25px;
    margin-right: 20px;
}

.coms .com .replay {
    font-size: 20px;
    margin-top: 10px;
    justify-content: space-between;
}

.all {
    padding: 0 50px 0;
}
.noComs{
    display: flex;
    justify-content: center;
}
.comNew .btn {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comNew .btn .tip {
    color: #99a9bf;
}

.comments .aa {
    margin: 20px 0;
}

.comments .aa .a {
    font-size: 25px;
}

.comments .aa .b {
    font-size: 15px;
    margin-left: 10px;
    color: #99a9bf;
}


.r {
    width: 80%;
    margin: 30px auto;
}

.course .video .videoinfo {
    padding: 20px;
    display: flex;
    align-items: center;

    img {
        width: 20px;
    }

    img:first-child {
        margin-right: 5px;
    }

    img:not(:first-child) {
        margin: 0 5px 0 30px;
    }
}

.course .title {
    font-size: 30px;
    margin-bottom: 20px;
}

.course .video {
    display: flex;
}

.course .video video {
    width: 800px;
    flex: 3;
}

.course .video .videoList {
    flex: 2;
}

.course .video .videoList .card {
    margin: 0 auto;
    width: 400px;
    height: 400px;
}

.course .video .videoList .list .listTitle {
    font-size: 20px;
    margin-bottom: 10px;
}

.course .video .videoList .list div {
    margin-bottom: 5px;
}

.course .video .videoList .list img {
    width: 20px;
}

.videoOnPlay, .course .video .videoList .list div:not(:first-child):hover {
    background-color: #f3f3f6;
    border-radius: 5%;
    color: salmon;

    a {
        color: salmon;
    }
}

.course .video .videoList .list .listTitle span {
    font-size: 15px;
    color: #999999;
}

.course .video .videoList a {
    color: #000;
    text-decoration: none;
}

</style>
